<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
    <app-scrollview class="scrollview" *ngIf="selectedTab" [ngSwitch]="selectedTab.key">
        <nz-row *ngSwitchCase="'worker_model'">
            <nz-col [nzSpan]="18">
                <app-worker-model-form mode="edit" [loading]="loading" [workerModel]="workerModel" [groups]="groups"
                    [currentAuthSummary]="currentAuthSummary" [patterns]="patterns" [types]="types"
                    (save)="saveWorkerModel($event)" (saveAsCode)="saveWorkerModelAsCode($event)"
                    (delete)="deleteWorkerModel()">
                </app-worker-model-form>
            </nz-col>
            <nz-col [nzSpan]="6">
                <app-worker-model-help></app-worker-model-help>
                <div *ngIf="workerModel" class="nzSegment">
                    <div *ngIf="workerModel.created_by?.username !== ''">
                        <h3>{{'common_created_by' | translate}}</h3>
                        <div>
                            <span nz-icon nzType="user" nzTheme="outline"></span> {{workerModel.created_by?.fullname}}
                            ({{workerModel.created_by?.username}})
                            <span *ngIf="workerModel.created_by?.admin"><b>Admin</b></span>
                        </div>
                        <div *ngIf="workerModel.created_by?.email !== ''">
                            <span nz-icon nzType="mail" nzTheme="outline"></span> {{workerModel.created_by?.email}}
                        </div>
                    </div>
                    <div class="field" *ngIf="workerModel.user_last_modified !== ''">
                        <h3>{{'common_last_modified' | translate}}</h3>
                        {{workerModel.user_last_modified}}
                    </div>
                    <div class="field" *ngIf="workerModel.last_registration !== ''">
                        <h3>{{'worker_model_last_registration' | translate}}</h3>
                        {{workerModel.last_registration}}
                    </div>
                    <div class="field">
                        <h3>Registration infos</h3>
                        <div>
                            Need registration : {{workerModel.need_registration}}
                        </div>
                        <div>
                            Check registration : {{workerModel.check_registration}}
                        </div>
                    </div>
                </div>
            </nz-col>
        </nz-row>
        <nz-row *ngSwitchCase="'capabilities'">
            <nz-col [nzSpan]="24">
                <div class="nzSegment">
                    <h3>{{'worker_model_capabilities' | translate}}
                        <span *ngIf="!workerModel?.need_registration" nz-icon nzType="check" nzTheme="outline"
                              nz-tooltip nzTooltipTitle="{{'worker_model_capabilities_up_to_date' | translate}}"
                              title="{{'worker_model_capabilities_up_to_date' | translate}}"></span>
                        <span *ngIf="workerModel?.need_registration" nz-icon nzType="warning" nzTheme="outline"
                              nz-tooltip nzTooltipTitle="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"
                              title="{{'worker_model_capabilities_need_refresh' | translate}}{{workerModel.last_registration}}"></span>
                    </h3>
                    <p>
                        {{'worker_model_help_capabilities' | translate}}
                    </p>
                </div>
            </nz-col>
            <nz-col [nzSpan]="24">
                <nz-table [nzPageSize]="100" [nzData]="workerModel?.registered_capabilities" #capaTable>
                    <tr *ngFor="let v of capaTable.data">
                        <td>
                            {{v.value}}
                        </td>
                    </tr>
                </nz-table>
            </nz-col>
        </nz-row>
        <nz-row *ngSwitchCase="'usage'">
            <nz-col [nzSpan]="24">
                <nz-spin nzTip="Loading..." *ngIf="loadingUsage"></nz-spin>
                <ng-container *ngIf="!loadingUsage">
                    <app-usage [pipelines]="usages"></app-usage>
                    <div class="centered" *ngIf="!usages || usages.length === 0">{{'worker_model_no_usage'
                                | translate}}</div>
                </ng-container>
            </nz-col>
        </nz-row>
    </app-scrollview>
</div>
